<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Sistema de Deteccion de Cambios en Paginas Web</title>
    <link rel="stylesheet" href="css/main_styles.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.9.2.custom.min.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="js/common-tools.js"></script>
    <script type="text/javascript" src="js/detectar.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <style type="text/css">
        #old_selectable {border: 2px solid; border-color:#E78B00}
        #old_selectable .ui-selected { background: #E78B00; color: white; }
        #old_selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        #old_selectable li { margin: 3px; padding: 2px; font-size: 10px; height: 20%; cursor: pointer;}

        #new_selectable {border: 2px solid; border-color:#E78B00}
        #new_selectable .ui-selected { background: #E78B00; color: white; }
        #new_selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        #new_selectable li { margin: 3px; padding: 2px; font-size: 10px; height: 20%; cursor: pointer;}
    </style>
</head>
<body>
<jsp:include page="loader.jsp"/>
<jsp:include page="error_dialog.jsp"/>
<jsp:include page="header.jsp" flush="true"/>
<div class="content_div_style">
    <br/>
    <p class="content" align="justify">
        Para detectar los cambios entre paginas es necesario colocar la URL de las paginas a comparar. Puede hacerse la comparacion entre una pagina web y un WARC de igual manera.
    </p>
    <p class="content" align="justify">
        Puede realizar la comparacion basandose en versiones de paginas almacenadas por la aplicacion. Solo debe seleccionar en la opcion "Elemento a comparar" la opcion "Pagina Web Almacenada"
    </p>
    <p class="content" align="justify">
        Adicionalmente en la parte de <b>Opciones</b> puede seleccionar bajo que algoritmo realizar la comparacion
    </p>
    <p class="content_note" align="justify">
        <b> NOTA: Es necesario colocar el nombre completo (Fully Qualified Name) de la URL a comparar para que la misma pueda ser realizada.</b>
    </p>

    <div id="accordion">
        <h3>Informacion de la Pagina Antigua</h3>
        <div class="show_div">
            <p>
                <div>
                    Elemento a comparar:
                    <select id="old_type">
                        <option value="null" selected="selected"> Seleccione </option>
                        <option value="WEB"> Pagina en la Web </option>
                        <option value="ARCHIVED"> Pagina Web Almacenada </option>
                    </select>
                </div>
                <br/>
                <div id="old_web_options">
                    URL (Ej: http://google.com):
                    <input id="old_url" type="text" class="url_textfield"/>
                </div>
                <div id="old_archived_options">
                    Coloque la URL de la pagina para buscar las versiones almacenadas<br/>
                    URL (Ej: http://google.com):
                    <input id="old_archived_url" type="text" class="url_textfield"/>
                    <input id="old_archived_button" type="button" value="Buscar"/><br/>
                    <p align="center">
                        <img id="old_loader" src="img/ajax-loader.gif" style="display: none"/>
                        <p id="old_list_message" class="content_note" align="center"></p>
                        <div id = "old_list_box" align="center" style="display: none;">
                            <table id="old_selectable">
                                <thead></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </p>
                </div>

            </p>
        </div>


        <h3>Informacion de la Pagina Actual</h3>
        <div class="show_div">
            <p>
            <div>
                Elemento a comparar:
                <select id="new_type">
                    <option value="null" selected="selected"> Seleccione </option>
                    <option value="WEB"> Pagina en la Web </option>
                    <option value="ARCHIVED"> Pagina Web Almacenada </option>
                </select>
            </div>
            <br/>
            <div id="new_web_options">
                URL (Ej: http://google.com):
                <input id="new_url" type="text" class="url_textfield"/>
            </div>
            <div id="new_archived_options">
                Coloque la URL de la pagina para buscar las versiones almacenadas<br/>
                URL (Ej: http://google.com):
                <input id="new_archived_url" type="text" class="url_textfield"/>
                <input id="new_archived_button" type="button" value="Buscar"/><br/>
                <p align="center">
                    <img id="new_loader" src="img/ajax-loader.gif" style="display: none"/>
                    <p id="new_list_message" class="content_note" align="center"></p>
                    <div id = "new_list_box" align="center" style="display: none;">
                    <table id="new_selectable">
                    </table>
                </div>
                </p>
            </div>

            </p>
        </div>
        <h3>Opciones</h3>
        <div class="show_div">
            <p>
                <div>
                    Algoritmo de Comparacion:
                    <select id="algorithm_type">
                        <option value="null" selected="selected">Seleccione</option>
                        <option value="HASHING">Page Change based on Hashing - Hassan Artail, Kassem Fawaz</option>
                        <option value="NOVELL">Novell Approach - H. P. Khandagale, P. P. Halkarnikar</option>
                    </select>
                </div>
                <br/>
                <div id="novell_options" style="display:none;">
                    <p class="content">
                        Este algoritmo realizara la comparacion de las paginas solamente a nivel de contenido, basandose en valores hash de los elementos presentes en los arboles
                        DOM de las paginas a comparar. El resultado sera un mensaje indicando si hubo o no un cambio en la pagina, asi como en donde se realizo el cambio.
                    </p>
                </div>
                <div id="hashing_options" style="display:none;">
                    <p class="content">
                        Para realizar la comparacion con este algoritmo debe proporcionar valores con relacion a la importancia del cambio en cuanto a contenido, atributos o estructura.
                        El resultado de este algoritmo sera un Coeficiente de Similitud entre ambas paginas<br/><br/>
                        <b>Importancia de Contenido:</b> El porcentaje de importancia que tendra un cambio en el contenido.<br/>
                        <b>Importancia de Atributos:</b> El porcentaje de importancia que tendra un cambio en los  atributos.<br/>
                        <b>Importancia de Estructura:</b> El porcentaje de importancia que tendra un cambio en la estrucctura de la pagina.<br/><br/>

                        El Coeficiente minimo de Similitud sera usado para que el algoritmo compare el resultado de la comparacion con el coeficiente enviado. Si el resultado de la comparacion
                        es menor a dicho coeficiente, se puede entonces concluir que se ha realizado un cambio en la pagina<br/><br/>

                        <span class="content_note"><b>NOTA: La suma de los valores de importancia debe ser el 100%. El Coeficiente de Similitud debe ser un valor entre -1 y 1</b></span>

                        <table class="coeficients">
                            <tr>
                                <td>Importancia de Contenido: <input id="content_coef" size="3" value="0"/>&nbsp;%</td>
                                <td>Importancia de Atributos: <input id="attribute_coef" size="3" value="0"/>&nbsp;%</td>
                                <td>Importancia de Estructura: <input id="structure_coef" size="3" value="0"/>&nbsp;%</td>
                                <td>Coeficiente de Similitud: <input id="similarty_coef" size="5" value="0"/></td>
                            </tr>
                        </table>
                    </p>
                </div>
            </p>
        </div>
    </div>
    <br/>
    <div id="submit">
        <input id="submit_button" type="button" value="Comparar"/>
    </div>
    <br/>

    <div id="result_div" value="Resultados de la Comparacion">
        <p id="result_message"></p>
        <div id="result_values">
            <div id="novel_page" class="page_content"></div>
            <div id="hashing_results"></div>
        </div>
        <p id="execution_time"></p>
    </div>
</div>

<jsp:include page="footer.jsp" flush="true"/>

</body>
</html>